<template>
  <v-card
    @click="$emit('click')"
    class="TaskCard-Container pointer pl-4 pr-2 py-6"
  >
    <v-row class="text-left" no-gutters>
      <v-col class="task-name">
        {{ propName }}
      </v-col>
      <v-col cols="3">
        <v-progress-linear
          class="rounded-pill"
          :value="progressValue"
          v-bind="$attrs"
        >
        </v-progress-linear>
      </v-col>
      <v-col
        :style="{ color: propTextColor }"
        class="text-center text"
        :cols="2"
      >
        {{ propNum }}/{{ propTotal }}
      </v-col>
    </v-row>
  </v-card>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
@Component({
  props: {
    name: {
      type: String,
      default: "Task",
    },
    num: {
      type: Number,
      default: 0,
    },
    total: {
      type: Number,
      default: 0,
    },
    textColor: {
      type: String,
      default: "#565656",
    },
  },
})
export default class TaskCard extends Vue {
  get propName() {
    return this.$props.name;
  }
  get propTotal() {
    return this.$props.total;
  }
  get propNum() {
    return this.$props.num;
  }

  get propTextColor() {
    return this.$props.textColor;
  }

  get progressValue() {
    return (this.propNum / this.propTotal) * 100;
  }
}
</script>
<style lang="scss">
@import "./TaskCard.scss";
</style>
